<template>
  <!-- 数据报表组件 -->
  <div class="data-reports">
    <!-- 头部路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <el-card class="box-card">
      <el-row>
        <!-- echart图表区 -->
        <div id="userSource" :style="echartStyle"></div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //图表数据
      dataReport: null,
      //图标实例
      myEchart: null,
      //容器ID
      echarBox: "userSource",
      //数据图表样式
      echartStyle: {
        width: "750px",
        height: "400px",
      },
      //数据图表配置
      echartOption: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: null,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: null
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: null
      },
    };
  },
  methods: {
    getDataReport() {
      //获取数据报表
      //打开加载层
      var loading = this.$loading.service(this.loadingConfig);
      //发起请求
      this.$axios
        .get("/reports/type/1")
        .then((res) => {
          if (res.meta.status == 200) {
            this.dataReport = res.data;
            //渲染图表
            this.renderEchart();
          } else {
            //提示错误信息
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          //请求失败
          this.$message.error(error);
        })
        .finally(() => {
          //关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    renderEchart() {
      //配置echart折线图
      this.myEchart = this.$echart.init(document.getElementById(this.echarBox));
      this.echartOption.legend.data = this.dataReport.legend.data;
      this.echartOption.series = this.dataReport.series;
      this.echartOption.xAxis[0].data = this.dataReport.xAxis[0].data;
      this.myEchart.setOption(this.echartOption);
    },
  },
  mounted() {
    this.getDataReport();
  },
};
</script>

<style>
</style>